<template>
  <div>
    <div class="travel-container">
      <!-- 封面 -->
      <div class="travel-header my-animation-slide-top">
        <!-- 背景图片 -->
        <video
          class="index-video"
          autoplay="autoplay"
          muted="muted"
          loop="loop"
          src="src/assets/video/1124.mp4"
        ></video>
        <div style="position: absolute; left: 20px; top: 20px">
          <!-- 标题 -->
          <div style="margin: 10px">
            <div>旅拍集</div>
            <div
              style="
                font-size: 36px;
                font-weight: bold;
                line-height: 1.5;
                margin-top: 20px;
              "
            >
              这里是我的旅拍哦
            </div>
          </div>
        </div>
        <div style="position: absolute; left: 20px; bottom: 40px; margin: 10px">
          每一张照片都是一次美好的记忆。
        </div>
      </div>

      <div class="travel-content my-animation-slide-bottom">
        <!-- 标签 -->
        <div class="photo-title-warp" v-if="!$common.isEmpty(photoTitleList)">
          <div
            v-for="(item, index) in photoTitleList"
            :key="index"
            :class="{ isActive: photoPagination.classify === item.classify }"
            @click="changePhotoTitle(item.classify)"
          >
            <ProTag
              :info="item.classify + ' ' + item.count"
              :color="$constant.before_color_list[Math.floor(Math.random() * 6)]"
              style="margin: 12px"
            >
            </ProTag>
          </div>
        </div>

        <div class="photo-title">
          {{ photoPagination.classify }}
        </div>

        <Photo :resourcePathList="photoList"></Photo>
        <div class="pagination-wrap">
          <div
            @click="pagePhotos()"
            class="pagination"
            v-if="photoPagination.total !== photoList.length"
          >
            下一页
          </div>
          <div v-else style="user-select: none">~~到底啦~~</div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <div style="background: var(--favoriteBg)">
      <Footer></Footer>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import Footer from "@/pages/navbar/common/Footer.vue";
import Photo from "@/pages/navbar/common/Photo.vue";
import ProTag from "@/pages/navbar/common/ProTag.vue";
import { ElMessage } from 'element-plus'

import { reqLovePhoto, reqResourcePath } from "@/api/webInfo";

const photoPagination = ref({
  current: 1,
  size: 10,
  total: 0,
  resourceType: "lovePhoto",
  classify: "",
});

const photoTitleList = ref([]);

const photoList = ref([]);

onMounted(() => {
  getPhotoTitles();
});

const getPhotoTitles = async () => {
  let result = await reqLovePhoto();
  if (result.code == 200) {
    photoTitleList.value = result.data;
    photoPagination.value = {
      current: 1,
      size: 10,
      total: 0,
      resourceType: "lovePhoto",
      classify: photoTitleList.value[0].classify,
    };
    console.log(123);
    
    changePhoto();
  } else {
    ElMessage({
      type: "error",
      message: result.message,
    });
  }
};

const changePhoto = async () => {
  let result = await reqResourcePath(photoPagination.value);
  if (result.code == 200) {
    photoList.value = photoList.value.concat(result.data.records);
    photoPagination.value.total = result.data.total;
  } else {
    ElMessage({
      type: "error",
      message: result.message,
    });
  }
};

const changePhotoTitle = (classify) => {
  if (classify !== photoPagination.value.classify) {
    photoPagination.value = {
      current: 1,
      size: 10,
      total: 0,
      resourceType: "lovePhoto",
      classify: classify,
    };
    photoList.value = [];
    changePhoto();
  }
};

const pagePhotos = () => {
  photoPagination.value.current = photoPagination.value.current + 1;
  changePhoto();
};
</script>

<style scoped>
.travel-container {
  padding: 25px;
  background: var(--favoriteBg);
}

.travel-header {
  margin: 60px auto 30px;
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  max-width: 1200px;
  color: var(--white);
  user-select: none;
}

.index-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--lightGreen);
}

.travel-content {
  margin: 0 auto;
  max-width: 1200px;
}

.photo-title-warp {
  max-width: 1150px;
  margin: 50px auto;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
}

.isActive {
  animation: scale 2.5s ease-in-out infinite;
}

.photo-title {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  line-height: 80px;
  letter-spacing: 2px;
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.pagination {
  padding: 13px 15px;
  border: 1px solid var(--lightGray);
  border-radius: 3rem;
  color: var(--greyFont);
  width: 100px;
  user-select: none;
  cursor: pointer;
  text-align: center;
}

@media screen and (max-width: 1150px) {
  .photo-title-warp {
    max-width: 780px;
  }
}
</style>
